<script lang="tsx" setup>
/**
 * 产量达成率
 */
import {DateFilterEnum} from "@/pages/data-cockpit/index.ts"
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue"
import * as echarts from 'echarts'

/**
 * 定义props
 */
const props = defineProps<{
  badReasonData: any
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", data: any): void
}>()

/**
 * 时间筛选类型
 */
const dateType = ref(DateFilterEnum.周)

/**
 * 时间类型改变
 */
const handleDateChange = (value: number) => {
  dateType.value = value
  emit('change', dateType.value)
}

/**
 * echarts
 */
const chartRef = ref()
let myChart: echarts.ECharts | null = null

/**
 * 初始化
 */
onMounted(() => {
  initEcharts()
})

/**
 * 取消挂载
 */
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize)
    myChart.dispose()
  }
})

/**
 * 重载echarts大小
 */
const handleResize = () => {
  myChart?.resize()
}

/**
 * 初始化echarts
 */
const initEcharts = () => {
  if (!chartRef.value) return
  myChart = echarts.init(chartRef.value)
  const option = {
    grid: {
      top: '10%',
      left: '10%',
      right: '0',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        fontSize: "14rem",
        color: "#ffffff"
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: "14rem",
        color: "#ffffff"
      }
    },
    dataZoom: [{
      startValue: 0,
      endValue: 2,
      xAxisIndex: [0],
      zoomLock: true,
      height: "15%",
      bottom: "20%"
    }],
    series: [
      {
        name: "不良原因",
        type: 'bar',
        barMaxWidth: '12rem',
        data: [0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(210, 139, 48, 0.75)'
            },
            {
              offset: 0.3,
              color: 'rgba(255, 160, 38, 1)'
            }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', handleResize)
  getData()
}

/**
 * 获取数据
 */
const getData = async () => {
  const list = [
    {
      name: '凹坑',
      value: 6,
    },
    {
      name: '穿孔',
      value: 8,
    },
    {
      name: '顶白',
      value: 15,
    },
    {
      name: '发白',
      value: 10,
    },
    {
      name: '飞边',
      value: 2,
    },
    {
      name: '黑印',
      value: 3,
    },
    {
      name: '划伤',
      value: 11,
    },
    {
      name: '混色',
      value: 10,
    },
    {
      name: '拉伤',
      value: 5,
    },
    {
      name: '料花',
      value: 4,
    },
    {
      name: '麻点',
      value: 8,
    },
    {
      name: '没进气',
      value: 6,
    },
    {
      name: '碰伤',
      value: 12,
    },
    {
      name: '缺料',
      value: 11,
    },
    {
      name: '熔接痕',
      value: 18,
    },
    {
      name: '色差',
      value: 0,
    },
    {
      name: '烧焦',
      value: 9,
    },
    {
      name: '缩痕',
      value: 4,
    },
    {
      name: '油印',
      value: 12,
    },
    {
      name: '粘模',
      value: 8,
    },
    {
      name: '变形',
      value: 15,
    },
    {
      name: '尺寸不良',
      value: 17,
    },
    {
      name: '调试不良',
      value: 8,
    },
    {
      name: '发黑',
      value: 3,
    },
    {
      name: '夹伤',
      value: 9,
    },
    {
      name: '剪缺',
      value: 6,
    },
    {
      name: '拉丝',
      value: 4,
    },
    {
      name: '冷料',
      value: 14,
    },
    {
      name: '亮斑',
      value: 15,
    },
    {
      name: '裂痕',
      value: 4,
    },
    {
      name: '抛光调机不良',
      value: 4,
    },
    {
      name: '抛光调试不良',
      value: 6,
    },
    {
      name: '气痕',
      value: 5,
    },
    {
      name: '气泡',
      value: 8,
    },
    {
      name: '溢胶',
      value: 12,
    },
    {
      name: 'PC开裂',
      value: 3,
    },
    {
      name: '超轻',
      value: 3,
    },
    {
      name: '剪伤',
      value: 2,
    },
    {
      name: '颗粒',
      value: 19,
    },
    {
      name: '缺口',
      value: 13,
    },
    {
      name: '银丝',
      value: 5,
    },
    {
      name: '鼓包',
      value: 4,
    },
    {
      name: '黑点',
      value: 6,
    },
    {
      name: '流痕',
      value: 4,
    },
    {
      name: '卡脚断裂',
      value: 2,
    },
    {
      name: '水印',
      value: 0,
    },
    {
      name: '黑料外漏',
      value: 0,
    },
    {
      name: '孔堵',
      value: 0,
    },
    {
      name: 'PC发黄',
      value: 0,
    },
    {
      name: '抛焦',
      value: 2,
    },
  ]
  const option: any = myChart?.getOption()
  option.xAxis = {
    type: 'category',
    axisLabel: {
      fontSize: "14rem",
      color: "#ffffff"
    },
    data: list.map((item: any) => item.name)
  }
  option.series[0].data = list.map((item: any) => item.value)
  myChart?.setOption(option)
}

/**
 * 监视
 */
watch(() => props.badReasonData, (newValue) => {
  if (newValue) {
    nextTick(() => {
      getData()
    })
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="bad-reason">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">不良原因分析</div>
<!--        <div class="title-time">-->
<!--          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.周}" class="title-time-item"-->
<!--               @click="handleDateChange(DateFilterEnum.周)">周-->
<!--          </div>-->
<!--          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.月}" class="title-time-item"-->
<!--               @click="handleDateChange(DateFilterEnum.月)">月-->
<!--          </div>-->
<!--          <div :class="{'title-time-item-active':dateType !== DateFilterEnum.年}" class="title-time-item"-->
<!--               @click="handleDateChange(DateFilterEnum.年)">年-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
    <div class="form">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>